<template>
  <div class="app-container">
    <el-card style="margin-bottom: 10px">
      <el-row class="id-row">
        <el-col :span="8">
          <el-card class="id-card" :body-style="{ padding: '0px' }">
            <a v-if="idCardInfoIdCard" @click.stop="onIdCardInfoCollect">
              <div class="id-card-showForm">
                <img src="@/assets/collect_images/idCardInfoCollect.png" class="image" title="点击采集">
              </div>
            </a>
            <div v-else class="id-card-info">
              <el-form class="id-card-info-from">
                <el-form-item size="small" label="身份证号" prop="idCard">
                  <el-input v-model="idCardInfo.idCard"></el-input>
                </el-form-item>
              </el-form>
              <div class="bottom id-card-info-frombottom clearfix">
                <el-button size="small" type="primary" @click.stop="onhandFormClick">确认</el-button>
              </div>
            </div>
            <!-- 信息回填样式 -->
            <div v-if="idCardShowPanel" class="showForm-box">
              <div class="showForm-box-top">
                <div class="showForm-box-top-lf">
                  <div class="showForm-top-list showForm-top-listFirst">
                    姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<small>{{idCardInfo.name}}</small>
                  </div>
                  <div class="showForm-top-list">
                    性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：{{idCardInfo.sex}}
                  </div>
                  <div class="showForm-top-list">
                    民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：{{idCardInfo.nationalityDisplay}}
                  </div>
                  <div class="showForm-top-list">
                    身份证号：{{idCardInfo.idCard}}
                  </div>
                  <div class="showForm-top-listCity">
                    住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：{{idCardInfo.address}}
                  </div>
                </div>
                <div class="showForm-box-top-lr">
                  <img :src="idCardInfo.idCardImg">
                </div>
              </div>
              <div class="showForm-box-bot">
                <div class="showForm-top-listBot showForm-top-listSenoud">
                  签发机关:{{idCardInfo.distDeprt}}
                </div>
                <div class="showForm-top-listBot">
                  有效期：{{idCardInfo.certStartDate}} - {{idCardInfo.certEndDate}}
                </div>
                <div class="showForm-box-botCard">
                  <a @click.stop="onIdCardInfoCollect"><i class="el-icon-refresh"></i></a>
                </div>
              </div>
            </div>
            <!-- 右上角按钮 -->
            <div class="handForm">
              <el-button size="small" type="primary" icon="el-icon-refresh" @click.stop="handFormClick">{{handFormVal}}</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="id-card" :body-style="{ padding: '0px' }">
            <div v-if="!photos.applicant.front.url">
              <a @click="handleOpenCamera(idCardCamera.front,userType.applicant)">
                <img src="@/assets/collect_images/身份证正面照.png" class="image" title="点击拍摄">
              </a>
            </div>
            <div v-else>
              <a @click="handleOpenCamera(idCardCamera.front,userType.applicant)">
                <img class="image" :src="photos.applicant.front.url" title="点击重拍" >
              </a>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="id-card" :body-style="{ padding: '0px' }">
            <div v-if="!photos.applicant.back.url">
              <a @click="handleOpenCamera(idCardCamera.back,userType.applicant)">
                <img src="@/assets/collect_images/身份证背面照.png" title="点击拍摄" class="image" >
              </a>
            </div>
            <div v-else>
              <a @click="handleOpenCamera(idCardCamera.back,userType.applicant)">
                <img class="image" :src="photos.applicant.back.url" title="点击重拍">
              </a>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="id-row" v-if="agent.enabled===false">
        <el-col :span="16" :offset="8">
          <el-button style="margin-left: 120px;" type="primary" @click="onEnableAgent(true)" plain>添加代办人</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-bottom: 10px" v-if="agent.enabled">
      <!--代办人-->
      <el-row class="id-row">
        <el-col :span="8" :offset="4">
          <el-card class="id-card" :body-style="{ padding: '0px' }">
            <div v-if="!photos.agent.front.url">
              <a @click="handleOpenCamera(idCardCamera.front,userType.agent)">
                <img src="@/assets/collect_images/身份证正面照.png" class="image" title="点击拍摄">
              </a>
            </div>
            <div v-else>
              <a @click="handleOpenCamera(idCardCamera.front,userType.agent)">
                <img class="image" :src="photos.agent.front.url" title="点击重拍" >
              </a>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="id-card" :body-style="{ padding: '0px' }">
            <div v-if="!photos.agent.back.url">
              <a @click="handleOpenCamera(idCardCamera.back,userType.agent)">
                <img src="@/assets/collect_images/身份证背面照.png" class="image" title="点击拍摄">
              </a>
            </div>
            <div v-else>
              <a @click="handleOpenCamera(idCardCamera.back,userType.agent)">
                <img class="image" :src="photos.agent.back.url" title="点击重拍" >
              </a>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="id-row">
        <el-col :span="16" :offset="8">
          <el-button style="margin-left: 120px;" type="danger" @click="onEnableAgent(false)" plain>删除代办人</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!--现场照片-->
    <el-card>
      <el-row class="id-row">
        <el-col :span="16" :offset="8">
          <el-card class="id-card" :body-style="{ padding: '0px' }">
            <div v-if="!photos.scene.photo.url">
              <a @click="handleOpenCamera(idCardCamera.scene,userType.scene)">
                <img src="@/assets/collect_images/办理人照片.png" class="image" title="点击拍摄">
              </a>
            </div>
            <div v-else>
              <img class="image" :src="photos.scene.photo.url" title="点击重拍" @click="handleOpenCamera(idCardCamera.scene,userType.scene)">
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!--弹出层-->
    <el-dialog title="资料采集" :visible.sync="dialogCameraVisible" width="60%">
      <div class="dialogBox-Main">
        <high-scanner @transPic="getPicFilePath" :shighScanner="ShighScanner" :point="point" ref="photoHighScanner"></high-scanner>
        <div class="dialog-footer">
          <el-button type="success" plain @click="dialogCameraVisible = false">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--手动采集弹出层-->
    <el-dialog title="添加证件信息" :visible.sync="idCardFormVisible" style="minWidth:600px; height:100%" width="60%">
      <div class="dialogBox-MainHand">
        <id-card-form :id-card-info="idCardInfo" ref="idCardForm"></id-card-form>
        <div class="dialog-footer">
          <el-button @click="idCardFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitIdCardForm">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import HighScanner from "@/components/HighScanner";
import IdCardForm from "./IdCardForm";
import { getIdCardInfo } from "@/utils/highScanner";
import { getAgeEtc } from "@/utils/tools";

export default {
  data() {
    return {
      handFormVal: "手动输入",
      idCardInfoIdCard: true, // 手动输入切换
      idCardFormVisible: false,
      idCardShowPanel: false,
      baseURL: process.env.BASE_API,
      uploadURL: process.env.BASE_API+"/file/upload",
      active: 0,
      dialogCameraVisible: false,
      ShighScanner: "IdCardShighScanner",
      idCardNo: null,
      point: 'h',
      agent: {
        enabled: false
      },
      userType: {
        applicant: 1,
        agent: 2,
        scene: 3,
        now: null
      },
      idCardCamera: {
        front: 1,
        back: 0,
        scene: 2,
        now: null
      }
    };
  },
  props: ["photos", "idCardInfo"],
  components: {
    HighScanner,
    IdCardForm
  },
  methods: {
    handFormClick() {
      this.idCardInfoIdCard = !this.idCardInfoIdCard;
      this.idCardInfoIdCard == false
        ? (this.handFormVal = "采集输入")
        : (this.handFormVal = "手动输入");
      if(this.idCardInfoIdCard){
        this.idCardShowPanel = true
      }else {
        this.idCardShowPanel = false
      }
    },
    onhandFormClick() {
      if (!this.idCardInfo.idCard) {
        this.$message({
          message: "请填写身份证",
          type: "warning"
        });
        
      } else {
        var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!regIdNo.test(this.idCardInfo.idCard)) {
          this.$message({
            message: "身份证格式不正确",
            type: "error"
          });
          return
        }
        let ageEtc = getAgeEtc(this.idCardInfo.idCard);
        this.idCardInfo.sex = ageEtc.sex;
        this.idCardInfo.birthDay = ageEtc.birthDay;
        this.idCardInfo.age = ageEtc.age;
        this.idCardFormVisible = true;
      }
    },
    submitIdCardForm() {
      this.$refs.idCardForm.$refs["form"].validate(valid => {
        if (valid) {
          this.idCardFormVisible = false
          this.idCardShowPanel = true
          this.idCardInfoIdCard = true
          this.handFormVal = "手动输入"
        }
      });
    },
    onEnableAgent(v) {
      this.agent.enabled = v;
      if (v === false) {
        this.resetAgent();
      }
    },
    onIdCardInfoCollect() {
      let temp = getIdCardInfo();
      if(temp.code!==0){
        this.$message({
          message: temp.msg,
          type: "error"
        });
        return
      }
      let ageEtc = getAgeEtc(temp.id);
      this.idCardInfo.idCard = temp.id;
      this.idCardInfo.sex = temp.sex;
      this.idCardInfo.address = temp.address;
      this.idCardInfo.name = temp.name;
      this.idCardInfo.nationalityDisplay = temp.nation;
      this.idCardInfo.birthDay = temp.birth_day;
      this.idCardInfo.distDeprt = temp.dist_deprt;
      this.idCardInfo.age = ageEtc.age;
      this.idCardInfo.certStartDate = temp.cert_begindate
      this.idCardInfo.certEndDate = temp.cert_enddate
      this.idCardInfo.idCardImg = "data:image/png;base64," + temp.portrat
      this.idCardShowPanel = true
    },
    handleOpenCamera(camera, userType) {
      this.userType.now = userType;
      this.idCardCamera.now = camera;
      this.dialogCameraVisible = true;
      if(this.userType.now===this.userType.scene){
        this.point='v'
      }else{
        this.point='h'
      }
      this.$nextTick(() => {
        this.$refs.photoHighScanner.openCamera(this.point)
      })
    },
    getPicFilePath(filePath) {
      var params = {};
      var res = JSON.parse(
        this.$refs.photoHighScanner.camera.UploadFile2(
          "file",
          params,
          this.uploadURL,
          filePath,
          ""
        )
      );
      let file = {
        url: res.data.url,
        fileId: res.data.fileId,
        fileDefKey: null,
        fileDefName: null
      };
      if (this.userType.now === this.userType.applicant) {
        if (this.idCardCamera.now === this.idCardCamera.front) {
          file.fileName = "申请人身份证正面照片.jpg";
          (file.fileDefKey = "applicant"),
            (file.fileDefName = "申请人身份证照片");
          this.photos.applicant.front = file;
          this.photos.applicant.photosList[0] = file;
        } else if (this.idCardCamera.now === this.idCardCamera.back) {
          file.fileName = "申请人身份证背面照片.jpg";
          (file.fileDefKey = "applicant"),
            (file.fileDefName = "申请人身份证照片");
          this.photos.applicant.back = file;
          this.photos.applicant.photosList[1] = file;
        }
      } else if (this.userType.now === this.userType.agent) {
        if (this.idCardCamera.now === this.idCardCamera.front) {
          file.fileName = "代办人身份证正面照片.jpg";
          (file.fileDefKey = "agent"), (file.fileDefName = "代办人身份证照片");
          this.photos.agent.front = file;
          this.photos.agent.photosList[0] = file;
        } else if (this.idCardCamera.now === this.idCardCamera.back) {
          file.fileName = "代办人身份证背面照片.jpg";
          (file.fileDefKey = "agent"), (file.fileDefName = "代办人身份证照片");
          this.photos.agent.back = file;
          this.photos.agent.photosList[1] = file;
        }
      } else if (this.userType.now === this.userType.scene) {
        file.fileName = "办理人照片.jpg";
        (file.fileDefKey = "scene"), (file.fileDefName = "办理人照片");
        this.photos.scene.photo = file;
        this.photos.scene.photosList.push(file);
      }
      let temp = this;
      setTimeout(function() {
        temp.$refs.photoHighScanner.shootingBtnLoading = false;
      }, 300);
    },
    resetAgent() {
      this.agent = {
        enabled: false
      };
    }
  }
};
</script>
<style scoped>
.handForm {
  position: absolute;
  right: 0;
  top: 0;
  width: 98px;
  height: 40px;
  z-index: 200;
}

.id-card {
  width: 352px;
  height: 210px;
  position: relative;
}

.id-card img {
  width: 100%;
  height: 100%;
}
/* 信息回填样式 */
.id-card-showForm {
  overflow: hidden;
  position: relative;
}

.showForm-top-listBot {
  font-size: 13px;
  height: 22px;
  color: #909399;
  line-height: 22px;
  overflow: hidden;
  width: 89%;
}

.showForm-top-listCity {
  font-size: 14px;
  height: 44px;
  color: #909399;
  line-height: 22px;
  overflow: hidden;
}

.showForm-top-list {
  font-size: 14px;
  height: 22px;
  color: #909399;
  line-height: 22px;
}

.showForm-top-listFirst {
  margin-top: 9px;
}

.showForm-top-list small {
  color: #409eff;
  font-size: 15px;
}

.showForm-box-top-lf {
  width: 248px;
}

.showForm-box-top-lr img {
  width: 87px !important;
  height: 130px !important;
  margin-top: 10px;
  margin-left: 5px;
}

.showForm-top-listSenoud {
  margin-top: 7px;
}

.showForm-box-top-lr {
  width: 110px;
}

.showForm-box-top {
  height: 150px;
  width: calc(100% - 10px);
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
}

.showForm-box-bot {
  height: 60px;
  width: calc(100% - 20px);
  border-top: 1px dashed #ccc;
  margin-left: 10px;
  position: relative;
}

.showForm-box-botCard .el-icon-picture-outline {
  font-size: 20px;
}

.showForm-box-botCard {
  position: absolute;
  right: 5px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(247, 209, 27);
  cursor: pointer;
}

.showForm-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99%;
  z-index: 100;
  background-color: rgba(233, 245, 253, 1);
  overflow: hidden;
}
/* 信息回填样式 */
.id-card-showForm img {
  width: 100%;
  height: 100%;
}

.id-card-info-frombottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.id-card-info {
  padding-left: 18px;
  padding-right: 18px;
}

.id-card-info img {
  height: 100%;
  width: 100px;
}

.id-card-info-from {
  margin-top: 39px;
}

.id-row {
  margin-bottom: 20px;
}

.dialog-footer {
  margin-top: 25px;
  margin-left: 25px;
  display: flex;
  justify-content: flex-end;
  padding-right: 25px;
}

.dialogBox-header {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e5e5e5;
  color: #676a6c;
  font-size: 18px;
  padding-left: 25px;
  overflow: hidden;
}

.dialogBox-MainHand {
  background-color: #fff;
  border-radius: 5px;
}

.dialogBox-Main {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
}

.dialogBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 2003;
  overflow: hidden;
}
</style>